<template>
	<view class="content">
		<view class="top-box">
			<view class="top-box-l">
				<uv-input placeholderClass="placeholderClass" v-model="iptValue" placeholder="怪物便利店系列"
					prefixIcon="search" suffixIcon="scan" suffixIconStyle="color: #000;fontSize:40rpx;" shape="circle"
					clearable @clear="clearValue">

				</uv-input>
			</view>
			<view class="top-box-r">
				<image src="/static/images/shequqiandao.png" mode="widthFix"></image>签到
			</view>
		</view>

		<view class="content-box1" :style="tabCurrent == 1 || tabCurrent == 3 ? 'margin-bottom:20rpx;' : ''">
			<view :class="['content-box1-item',tabCurrent == item.id ? 'activeTab' : '']"
				v-for="(item,index) in tabList" :key="index" @click="clickTab(item.id)">
				{{item.name}}
				<view class="active-line" v-if="tabCurrent == item.id"></view>
			</view>
		</view>

		<block v-if="tabCurrent == 1">
			<view class="attention-box">
				<view class="attention-box-t">
					<scroll-view scroll-x class="scroll-box" :show-scrollbar="false">
						<view class="scroll-box-item" v-for="(item,index) in 10" :key="index">
							<image src="/static/images/ceshitupian.png" mode="widthFix"></image>

							<view class="text">
								梦回沙洲梦
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="attention-box-b">
					<view class="attention-box-b-item" v-for="(item,index) in 10" :key="index">
						<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>

						<view class="attention-box-b-item-r">

							<view class="attention-box-b-item-r-t">
								<view class="message2-con-t-m">
									<view class="message2-con-t-m-t">
										<view class="text">
											海蓝见鲸文创小店海蓝见鲸文创小店海蓝见鲸文创小店
										</view>
										<view class="text1">
											V1级
										</view>
									</view>
									<view class="message2-con-t-m-b">
										<view class="text">
											上新10件商品
										</view>
										<view class="text1">
											30天前关注
										</view>
									</view>
								</view>
								<view class="message2-con-t-r" hover-class="activeM">
									进店
								</view>
							</view>

							<view class="attention-box-b-item-r-b">
								<scroll-view scroll-x class="scroll-box" :show-scrollbar="false">
									<view class="scroll-box-item" hover-class="activeM" v-for="(item,index) in 10"
										:key="index">
										<image src="/static/images/ceshitupian.png" mode="widthFix"></image>

										<view class="text">
											<span style="font-weight: 400;font-size: 24rpx;margin-top: 2rpx;">￥</span>680.00
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</block>

		<block v-if="tabCurrent == 2">
			<view class="swiper">
				<view class="swiper-con">
					<uv-swiper :list="list3" indicator indicatorMode="line" circular height="195"
						radius="8"></uv-swiper>
				</view>
			</view>

			<view class="category-box">
				<uv-scroll-list :indicator="true" indicatorColor="#e9ebf0" indicatorActiveColor="#e90d00">
					<view v-for="(item,index) in 9" :key="index"
						:class="['category-box-item',categoryCurrent == index ? 'active' : '']"
						@click="clickCategory(index)">
						<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
						全部
					</view>
				</uv-scroll-list>
			</view>

			<view class="shop-box">
				<Waterfall :list="goodsList" :columnCount="2" :gap="10">
					<template #default="{ item }">
						<view class="shop-box-item">
							<view class="img">
								<image :src="item.image" mode="widthFix"></image>
							</view>

							<view class="text1">
								泡泡玛特 X 壹橙视觉 labubu和周边泡泡玛特 X 壹橙视觉 labubu和周边
							</view>

							<view class="text2">
								<view class="text2-l">
									<span style="font-weight: 400;font-size: 28rpx;margin-top: 2rpx;">￥</span>520.00
								</view>
								<view class="text2-r">
									<!-- <uv-icon name="star" color="#828999" size="18"></uv-icon> -->
									<!-- 点击收藏 -->
									<uv-icon name="star-fill" color="#fa2800" size="18"></uv-icon>
									12
								</view>
							</view>
						</view>
					</template>
				</Waterfall>
			</view>
		</block>

		<block v-if="tabCurrent == 3">
			<view class="jiaoyi-box" hover-class="activeM" v-for="(item,index) in 10" :key="index"
				@click="goDetail(item)">
				<view class="jiaoyi-box-con">
					<image src="/static/images/ceshitupian.png" mode="widthFix"></image>

					<view class="jiaoyi-box-con-b">
						<view class="text1">
							绘本插画系列创作-《变型车》绘本插画系列创作-《变型车》绘本插画系列创作-《变型车》
						</view>
						<view class="text2">
							绘本一改往常厚重浓郁的风格，采用了手绘线稿结合电脑板绘上色的方式完成，所以画面中也保留了手采用了手绘线稿结合电脑板绘上色的方式完成采用了手绘线稿结合电脑板绘上色的方式完成
						</view>
					</view>
				</view>
			</view>
		</block>

		<block v-if="tabCurrent == 4">
			<view class="collect-box">
				<view class="title">
					猜你喜欢
				</view>

				<view class="collect-box-b">
					<scroll-view scroll-x class="scroll-box" :show-scrollbar="false">
						<view class="scroll-box-item" v-for="(item,index) in 10" :key="index">
							<image src="/static/images/ceshitupian.png" mode="widthFix"></image>

							<view class="text">
								梦回沙洲-敦煌文创梦回沙洲-敦煌文创
							</view>
							<view class="text1">
								<view class="text1-l">
									<span style="font-weight: 400;font-size: 28rpx;margin-top: 2rpx;">￥</span>680.00
								</view>
								<view class="text1-r" hover-class="activeM">
									<!-- <uv-icon name="star" color="#9095A8" size="16"></uv-icon> -->
									<!-- 点击收藏 -->
									<uv-icon name="star-fill" color="#f8b62c" size="16"></uv-icon>
									9
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="collect-box-b1">
					<view class="collect-box-b1-item" v-for="(item,index) in 10" :key="index" hover-class="activeM">
						<image src="/static/images/ceshitupian.png" mode="widthFix"></image>
						<view class="collect-box-b1-item-r">
							<view class="text">
								成都文创 | 当我把城市穿在身上成都文创 | 当我把城市穿在身上
							</view>

							<view class="text1">
								这次的设计虽然是采用成马赛道上的代表性成都文化建筑这次的设计虽然是采用成马赛道上的代表性成都文化建筑
							</view>

							<view class="text2">
								<view class="text2-l">
									<span style="font-weight: 400;font-size: 28rpx;margin-top: 5rpx;">￥</span>280.00
								</view>
								<view class="text2-r">
									<!-- <uv-icon name="star" color="#9095A8" size="20"></uv-icon> -->
									<!-- 点击收藏 -->
									<uv-icon name="star-fill" color="#f8b62c" size="20"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view style="width: 100%;height: 50rpx;"></view>
	</view>
</template>

<script setup>
	import Waterfall from '@/components/Waterfall.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'
	const goodsList = ref([{
			image: 'https://picsum.photos/id/1011/200/300',
		},
		{
			image: 'https://picsum.photos/id/1012/200/400',
		},
		{
			image: 'https://picsum.photos/id/1013/200/500',
		},
		{
			image: 'https://picsum.photos/id/1014/200/350',
		},
		{
			image: 'https://picsum.photos/id/1015/200/450',
		},
		{
			image: 'https://picsum.photos/id/1016/200/600',
		}, {
			image: 'https://picsum.photos/id/1017/200/600',
		}, {
			image: 'https://picsum.photos/id/1018/200/600',
		}, {
			image: 'https://picsum.photos/id/1019/200/600',
		}, {
			image: 'https://picsum.photos/id/1020/200/600',
		}, {
			image: 'https://picsum.photos/id/1021/200/600',
		}
	])

	const tabList = ref([{
		id: 1,
		name: '关注'
	}, {
		id: 2,
		name: '全部'
	}, {
		id: 3,
		name: '版权交易'
	}, {
		id: 4,
		name: '收藏'
	}])

	const tabCurrent = ref(1)
	const list3 = ref([
		'https://picsum.photos/id/1011/600/800', 'https://picsum.photos/id/1012/600/800'
	])
	const categoryCurrent = ref(0)

	const clickTab = (id) => {
		tabCurrent.value = id
	}

	const clickCategory = (index) => {
		categoryCurrent.value = index
	}

	const goDetail = (item) => {
		uni.navigateTo({
			url: '/subpackages/shopMall/copyrightDetail'
		})
	}

	const goDetailShop = (item) => {
		uni.navigateTo({
			url: '/subpackages/shopMall/shopDetail'
		})
	}
</script>

<style lang="scss" scoped>
	.top-box {
		width: 100%;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		background-color: #fff;

		.top-box-l {
			width: calc(100% - 120rpx);
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			:deep(.u-input--circle.data-v-651602aa) {
				background-color: #f2f3f7;
				border: none;
			}

			::v-deep .placeholderClass {
				color: #828999 !important;
			}

			::v-deep .u-input--radius.data-v-fdbb9fe6,
			.u-input--square.data-v-fdbb9fe6 {
				background-color: #f5f6fa !important;
				border: none !important;
			}
		}

		.top-box-r {
			width: 120rpx;
			height: 60rpx;
			background: #E90D00;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			font-size: 28rpx;
			color: #FFFFFF;

			image {
				width: 26rpx !important;
				height: 28rpx !important;
			}
		}
	}

	.content-box1 {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		display: flex;
		border-bottom: 2rpx solid #eee;

		.content-box1-item {
			position: relative;
			width: 25%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #9095A8;
		}

		.activeTab {
			font-weight: 600;
			color: #333;
		}

		.active-line {
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 70rpx;
			height: 8rpx;
			background-color: #e90d00;
			border-radius: 4rpx;
		}
	}

	.attention-box {
		width: 100%;
		padding: 0rpx 30rpx;

		.attention-box-t {
			width: 100%;
			margin-top: 20rpx;

			.scroll-box {
				width: 100%;
				white-space: nowrap;

				.scroll-box-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 16rpx;
					margin-right: 30rpx;

					image {
						width: 100rpx !important;
						height: 100rpx !important;
						border-radius: 50rpx !important;
					}

					.text {
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
					}
				}
			}
		}

		.attention-box-b {
			width: 100%;
			margin-top: 50rpx;

			.attention-box-b-item {
				width: 100%;
				display: flex;
				margin-bottom: 30rpx;

				image {
					width: 100rpx !important;
					height: 100rpx !important;
					border-radius: 50rpx !important;
				}

				.attention-box-b-item-r {
					width: calc(100% - 100rpx);


					.attention-box-b-item-r-t {
						display: flex;
						align-items: center;

						.message2-con-t-m {
							width: calc(100% - 120rpx);
							padding: 0rpx 20rpx;

							.message2-con-t-m-t {
								width: 100%;
								display: flex;
								align-items: center;

								.text {
									max-width: calc(100% - 60rpx);
									font-weight: 600;
									font-size: 30rpx;
									color: #000000;
									padding-right: 16rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.text1 {
									width: 60rpx;
									height: 36rpx;
									background: #FF6960;
									border-radius: 8rpx 8rpx 8rpx 8rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-weight: 400;
									font-size: 20rpx;
									color: #FFF7ED;
								}
							}

							.message2-con-t-m-b {
								width: 100%;
								margin-top: 8rpx;
								display: flex;
								align-items: center;
								gap: 20rpx;

								.text {
									font-weight: 400;
									font-size: 24rpx;
									color: #41BC55;
								}

								.text1 {
									font-weight: 400;
									font-size: 24rpx;
									color: #9095A8;
								}
							}
						}

						.message2-con-t-r {
							width: 120rpx;
							height: 52rpx;
							background: #E90D00;
							border-radius: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}

					.attention-box-b-item-r-b {
						width: 100%;
						margin-top: 30rpx;

						.scroll-box {
							width: 100%;
							white-space: nowrap;

							.scroll-box-item {
								width: 200rpx;
								display: inline-flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								gap: 16rpx;
								margin-right: 20rpx;

								image {
									width: 200rpx !important;
									height: 200rpx !important;
									border-radius: 8rpx !important;
								}

								.text {
									width: 100%;
									font-weight: 600;
									font-size: 32rpx;
									color: #E90D00;
								}
							}
						}
					}
				}
			}
		}
	}

	.swiper {
		width: 100%;
		padding: 0rpx 30rpx;
		margin-top: 30rpx;

		.swiper-con {
			width: 100%;
			height: 390rpx;
		}
	}

	.category-box {
		width: 100%;
		margin-top: 30rpx;
		padding: 0rpx 30rpx;

		.category-box-item {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #9095A8;
			font-weight: 400;
			font-size: 24rpx;
			gap: 10rpx;
			margin-right: 50rpx;

			image {
				width: 96rpx !important;
				height: 96rpx !important;
				border-radius: 48rpx !important;
			}
		}

		.active {
			color: #000 !important;
			font-weight: 600 !important;
		}
	}

	.shop-box {
		width: 100%;
		margin-top: 30rpx;
		padding: 0rpx 30rpx;

		.shop-box-item {
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
			padding-bottom: 10rpx;
			border-radius: 0rpx 0rpx 8rpx 8rpx;

			.img {
				position: relative;
				width: 100%;

				image {
					width: 100% !important;
					// height: 400rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}
			}


			.text1 {
				width: 100%;
				margin: 20rpx 0rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-weight: 600;
				font-size: 30rpx;
				color: #000000;
				padding: 0rpx 10rpx;
			}

			.text2 {
				width: 100%;
				display: flex;
				padding: 0rpx 10rpx;

				.text2-l {
					width: 60%;
					display: flex;
					align-items: center;
					font-weight: 600;
					font-size: 32rpx;
					color: #E90D00;
				}

				.text2-r {
					width: 40%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					gap: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #9095A8;
				}
			}
		}
	}

	.jiaoyi-box {
		width: 100%;
		padding: 0rpx 30rpx;
		margin-top: 20rpx;

		.jiaoyi-box-con {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

			image {
				width: 100% !important;
				height: 388rpx !important;
				border-radius: 24rpx 24rpx 0rpx 0rpx !important;
			}

			.jiaoyi-box-con-b {
				width: 100%;
				padding: 30rpx;

				.text1 {
					width: 100%;
					font-weight: 600;
					font-size: 30rpx;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 20rpx;
				}

				.text2 {
					width: 100%;
					font-weight: 400;
					font-size: 28rpx;
					color: #9095A8;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
		}
	}

	.collect-box {
		width: 100%;
		padding: 30rpx;

		.title {
			width: 100%;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.collect-box-b {
			width: 100%;
			margin-top: 20rpx;

			.scroll-box {
				white-space: nowrap;

				.scroll-box-item {
					width: 280rpx;
					display: inline-block;
					margin-right: 20rpx;

					image {
						width: 280rpx !important;
						height: 280rpx !important;
						border-radius: 8rpx 8rpx 8rpx 8rpx !important;
					}

					.text {
						width: 100%;
						margin-top: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: 600;
						font-size: 24rpx;
						color: #000000;
					}

					.text1 {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.text1-l {
							width: 50%;
							font-weight: 600;
							font-size: 36rpx;
							color: #E90D00;

							span {
								font-size: 28rpx;
								margin-bottom: 9rpx;
							}
						}

						.text1-r {
							width: 50%;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							font-weight: 400;
							font-size: 24rpx;
							color: #9095A8;
						}
					}
				}
			}
		}

		.collect-box-b1 {
			width: 100%;
			margin-top: 50rpx;

			.collect-box-b1-item {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;

				image {
					width: 280rpx !important;
					height: 280rpx !important;
					border-radius: 8rpx 8rpx 8rpx 8rpx !important;
				}

				.collect-box-b1-item-r {
					width: calc(100% - 280rpx);
					padding-left: 20rpx;

					.text {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-weight: 600;
						font-size: 30rpx;
						color: #000000;
					}

					.text1 {
						width: 100%;
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #9095A8;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.text2 {
						width: 100%;
						margin-top: 50rpx;
						display: flex;
						align-items: center;

						.text2-l {
							width: 50%;
							display: flex;
							align-items: center;
							font-weight: 600;
							font-size: 36rpx;
							color: #E90D00;

							span {
								font-size: 28rpx;
								margin-bottom: 5rpx;
							}
						}

						.text2-r {
							width: 50%;
							display: flex;
							justify-content: flex-end;
						}
					}
				}
			}
		}
	}
</style>